<template>
  <view class="container gray_bg repair_tip">
    <tm-sheet :margin="[16, 20]" :round="3" :shadow="2">
      <view class="tip_img">
        <image class="img" src="@/static/img/success_tip.png" mode="aspectFit"></image>
        <view class="tip_text">报修信息已提交</view>
      </view>
      <view>
        <view class="cus_item">
          <view class="cus_item_label">报修类型</view>
          <view class="cus_item_value">{{orderInfo.repair_type_text}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">报修人</view>
          <view class="cus_item_value">{{orderInfo.real_name}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">上门时间</view>
          <view class="cus_item_value">{{orderInfo.repair_time}}</view>
        </view>
        <view class="cus_item">
          <view class="cus_item_label">故障描述</view>
          <view class="cus_item_value">
            <view>{{orderInfo.storeTags}}</view>
            <view>{{orderInfo.description}}</view>
          </view>
        </view>
      </view>
    </tm-sheet>
    <view class="cus_footer_btn">
      <tm-button class="cancel_btn" @click="cancelOrderInfo" label="取消" round="25" color="#EA0000" outlined ></tm-button>
      <tm-button label="修改" round="25" @click="editOrder"></tm-button>
    </view>
<!--     取消工单 -->
    <tm-picker
        @confirm="selectCancelType"
        :columns="cancelTypeOptions"
        v-model:model-str="show.pickerStr"
        v-model:show="showPicker"
        map-key="name"
        :default-value="show.pickerIndex"
        v-model="show.pickerIndex"
    ></tm-picker>
  </view>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import { getDictionary, cancelOrder} from '@/api_request/api'
import { onLoad } from '@dcloudio/uni-app';

const showPicker = ref(false)
const cancelTypeOptions = ref<any>([])
const show = ref({
  pickerIndex: [0],
  pickerStr: ''
})
const orderInfo = ref<any>({})
onLoad((option: any) => {
  console.log('jp=======option',option)
  const orderData = option.orderData ? JSON.parse(option.orderData) : {}
  console.log('jp======orderData',orderData)
  orderInfo.value = orderData
})
const initData = () => {
  getDictionary({id: 15}).then((res: any) => {
    console.log('jp======取消工单类型',res)
    cancelTypeOptions.value = res.data?.list
  })
}
initData()
// 选择取消类型
const selectCancelType = async (val: any) => {
  console.log('jp=======val',val)
  const item = cancelTypeOptions.value[val]
  console.log('jp=======item',item)
  const {code, message} = await cancelOrder({cancel_type: item.id,cancel_content: '', id: orderInfo.value.repair_id})
  if(code === 200) {
    uni.$showMsg('操作成功！')
    // 页面跳转 todo
    return
  }
  uni.$showMsg(message)
}
// 取消工单
const cancelOrderInfo = () => {
  showPicker.value = true
}
// 编辑工单
const editOrder = () => {
// 调修改工单的页面 todo
  uni.navigateTo({
    url: `/subpkg/create_repair/index?opType='edit'&id=${orderInfo.value.repair_id}`
  })
}
</script>

<style lang="scss" scoped>
  .repair_tip{
    height: 100%;
    .tip_img{
      padding-bottom: 30px;
      image{
        width: 220px;
        margin: 0 auto;
        display: block;
      }
    }
    .tip_text{
      font-size: $cus-font-size-16;
      text-align: center;
    }
    .cus_item{
      justify-content: space-between;
      padding-left: 12px;
      padding-right:12px;
    }
  }
  .cus_footer_btn{
    display: flex;
    justify-content: space-around;
    tm-button{
      //width: 80%;
    }
  }
</style>